<style>
    .vl {
        vertical-align: middle !important;
    }
</style>

<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class=" callout-success callout" style="padding: 0;">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                            <li class="breadcrumb-item" aria-current="page">项目列表</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" data-toggle="modal" data-target="#addModal"><i
                                    class="mdi mdi-plus"></i> 新增</a>
                            <a class="btn btn-danger dels" href="javascript:;"><i class="mdi mdi-window-close"></i>
                                删除</a>
                        </div>

                        <form class="search-bar ml-md-auto form-inline" method="get"
                            action="{:url('admin/project/search')}" role="form">
                            <input type="hidden" name="search_field" id="search-field" value="name" />
                            <div class="input-group ml-md-auto">
                                <div class="input-group-prepend">
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false" id="search-btn">
                                        项目名称
                                    </button>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#!" data-field="name">项目名称</a>
                                    </div>
                                </div>
                                <input type="text" class="form-control" name="keyword" placeholder="请输入项目名称" />
                            </div>
                        </form>

                        <a type="click" class="btn btn-info mb-2" style="margin-left: 10px;"
                            href="{:url('admin/project/index')}">重置</a>

                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all" />
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>编号</th>
                                        <th>项目名称</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {foreach $projectList as $item}
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}" />
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td class="vl">{$item.id}</td>
                                        <td class="vl">{$item.name}</td>
                                        <td class="vl">
                                            <div class="btn-group">
                                                <a type="button" class="role-add btn btn-xs btn-default" title=""
                                                    data-toggle="modal" data-target="#myModal_{$item.id}"
                                                    data-id='{$item.id}'><i class="mdi mdi-pencil"></i></a>

                                                <a class="btn btn-xs btn-default del" data-original-title="删除"
                                                    href="javascript:;" data-toggle="tooltip" data-id="{$item.id}"><i
                                                        class="mdi mdi-window-close"></i></a>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- TODO edit模态框 -->
                                    <div class="modal fade bd-example-modal-lg" id="myModal_{$item.id}" tabindex="-1"
                                        role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;"
                                        aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h6 class="modal-title" id="myLargeModalTitle">修改项目</h6>
                                                    <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form class="edit_form" action="" method="" data-id="{$item.id}">
                                                        <div class="form-group">
                                                            <label for="id">项目编号</label>
                                                            <input type="text" class="form-control" id="id"
                                                                value="{$item.id}" readonly name="id">
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="nickname">项目名称</label>
                                                            <input type="text" class="form-control" id="name"
                                                                value="{$item.name}" name="name">
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">关闭</button>
                                                            <button type="submit"
                                                                class="btn btn-primary model_edit">保存</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>

                        <div style="text-align: center">{$projectList->render()}</div>
                    </div>
                </div>
            </div>

            <!-- TODO 模态框 -->
            <div class="modal fade bd-example-modal-lg" id="addModal" tabindex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel" style="display: none;" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="myLargeModalTitle">新增项目</h6>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form class="add_form" action="" method="">
                                <div class="form-group">
                                    <label for="add_name">项目名称</label>
                                    <input type="text" class="form-control" id="add_name" name="add_name">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary">保存</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</main>
<!--End 页面主要内容-->

<script>
    // 获取的id
    function GetId() {
        // 存放id的数组
        let list = []

        $('input[name="ids[]"]:checked').each(function () {
            // console.log(item);
            list.push($(this).val())
        })

        return list
    }

    let idArr = [];

    // TODO ajax异步修改项目
    $(".edit_form").on('submit', function (e) {
        e.preventDefault()
        let formDate = $(this).serialize();
        // let id = $(this).data('id');

        $.ajax({
            type: "post",
            url: `{:url('admin/project/edit')}`,
            data: formDate,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {

                    $.notify({
                        icon: 'mdi mdi-check',
                        message: res.msg,
                    }, {
                        type: "success",
                        delay: 1500,
                        z_index: 9999,
                        onClose: function () {
                            location.reload();
                        }
                    });
                } else {
                    $.notify({
                        icon: 'mdi mdi-window-close',
                        message: res.msg,
                    }, {
                        type: "danger",
                        z_index: 9999,
                        delay: 1500
                    });
                }
            }
        });
    })

    // TODO ajax新增项目
    $(".add_form").on('submit', function (e) {
        e.preventDefault()
        let formDate = $(this).serialize();
        // console.log(formDate);

        $.ajax({
            type: "post",
            url: `{:url('admin/project/add')}`,
            data: formDate,
            dataType: "json",
            success: function (res) {
                if (res.code === 1) {

                    $.notify({
                        icon: 'mdi mdi-check',
                        message: res.msg,
                    }, {
                        type: "success",
                        delay: 1500,
                        z_index: 9999,
                        onClose: function () {
                            location.reload();
                        }
                    });
                } else {
                    $.notify({
                        icon: 'mdi mdi-window-close',
                        message: res.msg,
                    }, {
                        type: "danger",
                        z_index: 9999,
                        delay: 1500
                    });
                }
            }
        });
    })

    $('.search-bar .dropdown-menu a').click(function () {
        var field = $(this).data('field') || '';
        $('#search-field').val(field);
        $('#search-btn').html($(this).text());
    });

    $(".del").on("click", function () {
        let pid = $(this).data("id");
        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除此数据",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/project/delete')}`,
                            data: {
                                action: 'del',
                                pid,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger'
                },
            },
        });
    });

    $('.dels').on('click', function () {
        idArr = GetId();
        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除选中数据",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/project/delete')}`,
                            data: {
                                action: 'dels',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
        // console.log(idArr);
    })
</script>